<template>
  <div>
    <!-- 头部栏 -->
    <el-header class="navheader">
      <div>
        <div class="login_text">聚图信息</div>
      </div>
      <div class="user">
        <!-- 已登录 -->
        <div v-if="userName != null" style="z-index:5">
          <div class="name">欢迎您!亲爱的{{ userName }}</div>
          <el-dropdown>
            <img src="../assets/Images/manager/user_pic.png" class="user_img" />
            <!-- 用户下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-house">
                <div @click="goUserPage" class="goUserPage">个人中心</div>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button">
                <div @click="logout" class="gohome">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 未登录 -->
        <div v-else class="unlog">
          <router-link to="/login" class="login_text02">登录</router-link>
          <div class="vertical">|</div>
          <router-link to="/register" class="login_text03">注册</router-link>
        </div>
      </div>
    </el-header>
    <!-- 轮播图 -->
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in newsList" :key="item.newId">
        <!-- <el-link :href="item.newUrl"> -->
        <el-image class="imgs" :src="item.imageUrl"></el-image>
        <!-- </el-link> -->
      </el-carousel-item>
    </el-carousel>
    <div style="background-color: #4c61a0;height: 40px;text-align: center;padding-top:20px"></div>
    <div class="box clearfix">
      <div class="box clearfix">
        <!-- 页面左侧 -->
        <div class="leftbox clearfix">
          <!-- 选择按钮 -->
          <!-- <el-card>
          <div style="margin:20px">
            <span class="title">快捷通道</span>
          </div>
          <el-button type="primary" class="choose apply" @click="toApply()">申请门牌</el-button>
          <el-button type="primary" class="choose check" @click="toCheck()">查看门牌</el-button>
          <el-button type="primary" class="choose reapply" @click="toReissue()">门牌补发</el-button>
        </el-card> -->
          <!-- 管理政策 -->
          <el-card class="block">
            <div slot="header" class="clearfix">
              <span class="title">管理政策</span>
              <!-- 选择地区 -->
              <el-select v-model="optionList.regionName" placeholder="请选择地区" class="selectRange" clearable>
                <el-option v-for="item in optionList" :key="item.regionCode" :label="item.regionName"
                  :value="item.regionCode" style="text-align-last: center">
                </el-option>
              </el-select>
            </div>
            <div v-for="item in policyList" :key="item.id">
              <div v-if="item.category == 1">
                <li class="text"><a @click="toPolicyDetail(item)">{{ item.title }}</a></li>
              </div>
            </div>
          </el-card>
          <!-- 通知公告 -->
          <el-card class="block">
            <div slot="header" class="clearfix">
              <span class="title">通知公告</span>
            </div>
            <div v-for="item in policyList" @click="toPolicyDetail(item)" ref="#" :key="item.id">
              <li class="text" v-if="item.category == 2"><a>{{ item.title }}</a></li>
            </div>
          </el-card>
        </div>
        <!-- 页面右侧 -->
        <el-card class="rightbox">
          <div ref="testLine" id="testLine" style="width:750px; height:700px" @click="toMapDetail()"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import chengduMap from '@/assets/Js/chengdu.json'
export default {
  name: 'Homepage',
  components: {
    axios
  },
  data () {
    return {
      userName: null,
      pageNum: 1,
      pageSize: 6,
      newsList: [],
      // 政策信息
      policyList: [],
      // 区域列表
      optionList: [],
      mapvalue: [],
      // 地图
      myChart: null,
      option: {
        title: {
          text: '成都市区域地图',
          textStyle: {
            color: '#515f8a'
          }
          // left: 'center'
        },
        geo: {
          type: 'map',
          map: 'CD',
          zoom: 1.1,
          itemStyle: {
            areaColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#e2ecbd' // 0% 处的颜色
              }, {
                offset: 1, color: '#e7e2d6' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          emphasis: {
            itemStyle: {
              borderColor: '#1e1e1e',
              borderWidth: 1
            }
          },
          roam: true
        },
        series: [
          {
            name: '成都市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
              { name: '市南点位', value: [120.395966, 36.070892, 50] }
            ],
            symbol: 'pin',
            symbolSize: '30',
            encode: {
              value: 2
            },
            label: {
              formatter: (a) => {
                return `${a.name} ${a.value[2]}`
              },
              position: 'right',
              show: false,
              backgroundColor: '#fff',
              fontSize: 14,
              borderWidth: 1,
              borderRadius: 5,
              height: 80
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      }
    }
  },
  created () {
    this.getName()
    this.getNews()
    this.getPolicy()
    this.getOptions()
  },
  methods: {
    // 获取用户姓名
    getName () {
      this.userName = window.sessionStorage.getItem('userName')
      console.log(this.userName)
    },
    goUserPage () {
      this.$router.replace('/mapu')
    },
    // 退出登录
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取轮播图信息
    async getNews () {
      await this.$axios
        .get(`qiniu/im`, {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        })
        .then((res) => {
          console.log('newsRes', res)
          console.log('news res.data.data', res.data.data.list)
          this.newsList = res.data.data
        })
        .catch((res) => {
          this.$message.info('获取请求失败!')
        })
    },
    // 获取管理政策
    async getPolicy () {
      await this.$axios
        .get(`/pogofficialinfo/user`)
        .then((res) => {
          console.log('getPolicyRes', res)
          if (res.data.code === 200) {
            // console.log(res);
            this.policyList = res.data.data
          } else {
            this.$message.info('获取列表失败！')
          }
        })
        .catch((res) => {
          console.log('getPolicyError', res)
        })
    },
    // 获取地区列表
    async getOptions () {
      await this.$axios.get(`pogregion`)
        .then(res => {
          console.log('getOptionsRes', res)
          if (res.data.code === 200) {
            this.optionList = res.data.data
            this.optionList.id = res.data.data.id
            console.log(res.data.data)
          }
        }).catch(res => {
          console.log('getoptionListError', res)
        })
    },
    handleChange () {
      console.log(this.optionList)
    },
    // 查看地图详情
    toMapDetail () {
      this.$router.replace('/acurrentMap')
    },
    // 查看文章详情
    toPolicyDetail (item) {
      window.sessionStorage.setItem('articleId', item.id)
      // console.log(item.id);
      let toarticles = this.$router.resolve({
        path: '/articles'
      })
      window.open(toarticles.href, '/_blank')
    },
    // 快捷路径
    toApply () {
      this.$router.replace('/applicate')
    },
    toCheck () {
      this.$router.replace('/progress')
    },
    toReissue () {
      this.$router.replace('/reissue')
    },
    // 地图
    initChart () {
      const {
        myChart,
        option
      } = this
      // 需要注册地区，注意这个名称就是后边引用地图名称QD
      this.$echarts.registerMap('CD', { geoJSON: chengduMap })
      myChart.setOption(option)
    }
  },
  mounted () {
    // 两张引入方式都可以，这里我用ref,注意一定要节点 初始化完成
    // this.myChart = this.$echarts.init(document.getElementById('testLine'))
    this.myChart = this.$echarts.init(this.$refs.testLine)
    this.initChart()
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

body,
html {
  width: auto;
}

/* 头部栏 */
/* .gohome {
  float: left;
  margin-right: 100px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
} */
.navheader {
  position: relative;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  box-shadow: 0px 15px 10px -15px #4c61a0;
  margin-bottom: 10px;
  /* 内容垂直居中显示 */
  display: flex;
  align-items: center;
}

/* 头部栏图片 */
.logo_top {
  float: left;
  margin-left: 10px;
  height: 40px;
  width: 50px;
}

/* 头部栏文字：快修 */
.login_text {
  float: left;
  font-size: 36px;
  color: #4c61a0;
  margin-left: 50px;
}

.nav {
  float: left;
}

.nav ul {
  display: inline;
  list-style: none;
}

.nav ul li {
  float: left;
}

.nav ul li div {
  line-height: 50px;
}

a {
  text-decoration: none;
}

/* 头部栏跳转文字 */
.login_navigate {
  width: 70px;
  display: inline;
  margin-left: 80px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* 用户登录头像 */
.user_img {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 6px;
  width: 50px;
  border-radius: 50%;
}

.name {
  float: left;
  margin-top: 20px;
}

.goUserPage,
.gohome {
  display: inline;
  text-decoration: none;
  color: gray;
  padding: 10px;
}

/* 头部栏右侧注册登录字 */
.login_text02 {
  float: left;
  margin-right: 20px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  line-height: 42px;
}

.vertical {
  float: left;
  margin-right: 20px;
  line-height: 42px;
}

.login_text03 {
  float: left;
  margin-right: 80px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  line-height: 42px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.unlog {
  z-index: 3;
  width: 200px;
}

.block {
  border-radius: 20px;
  margin-top: 4%;
  padding: 2%;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.selectRange {
  left: 350px;
  width: 30%;
  text-align-last: center;
}

.title {
  border-left: 4px solid #4c61a0;
  padding: 10px 20px;
  height: 30px;
  line-height: 30px;
  margin-top: 24px;
  font-size: 22px;
}

.text {
  border-bottom: 1px solid rgb(217, 216, 216);
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 00;
}

.box {
  background-color: #f5f6f7;
  margin-top: 30px;
  margin-bottom: 30px;
}

.leftbox {
  /* padding: 50px; */
  float: left;
  left: 140px;
  width: 40%;
  position: absolute;
  overflow: auto;
}

.rightbox {
  float: left;
  right: 140px;
  margin-top: 35px;
  position: absolute;
  overflow: auto;
}

.choose:hover {
  color: #dcb760;
}
</style>
